<template>
    <v-container class="white" style="min-height: 95vh;">
      <v-app-bar app elevation="0" dense color="white">
        <v-btn icon @click="$router.go(-1)">
            <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
        <v-toolbar-title class="text-center flex-grow-1 subtitle-1">注册</v-toolbar-title>
        <v-btn plain text :ripple="false">
        </v-btn>
      </v-app-bar>

      <h3 class="text-center white col-12 mt-4">
        <v-img :src="login_logo" contain height="70" style="display:inline-block;height:75px"></v-img>
      </h3>

     <v-form ref="form" class="pa-2">
      <v-row dense>
        <v-col cols="12">
          <v-text-field
            label="用户名"
            v-model="name"
            color="primary"
            type="text"
          ></v-text-field>
        </v-col>

        <v-col cols="12" >
          <v-text-field
            label="手机号"
            type="text"
            v-model="mobile"
            color="primary"
            clearable
          ></v-text-field>
        </v-col>

         <v-col cols="12" >
          <v-text-field
            label="登录密码"
            type="password"
            v-model="password"
            color="primary"
            clearable
          ></v-text-field>
        </v-col>

        <v-col cols="12">
           <v-text-field
                id="smscode"
                v-model="sms_code"
                clearable
                label="验证码"
                type="text"
            >
                <template v-slot:append>
                    <span v-if="count_down == 0"  class="poiner" style="font-size:14px;"  @click="sendSms"> 发送短信 </span>
                    <span v-if="count_down > 0" style="font-size:14px;" > {{count_down}} 秒 </span>
                </template>
            </v-text-field>
        </v-col>

         <v-col cols="12" >
          <v-text-field
            label="邀请码"
            type="text"
            v-model="invite_code"
            color="primary"
            clearable
          ></v-text-field>
        </v-col>
        <v-col cols="12" >
          <v-checkbox
              v-model="isTermsAgreed"
          >
              <template #label>
                  我已阅读并同意
                  <a href="javascript:void(0)" @click="goToTermsPage">用户注意条款</a>
              </template>
          </v-checkbox>
      </v-col>
        <v-col cols="12">
          <v-btn
            block
            class="mt-4"
            color="primary"
            large
            rounded
            depressed
            @click="doRegister()"
            :loading="loading"
            >注册</v-btn
          >
        </v-col>
        </v-row>
      </v-form>

      <v-row class="mt-1">
          <v-col cols="12" >
              <v-btn text plain color="primary" :to="`/login`">已有帐号, 去登录</v-btn>
          </v-col>
      </v-row>
    </v-container>
</template>

<script>

import axios from "axios";

export default {

  data: () => ({
    name: "",
    mobile: "",
    password: "",
    loading: false,
      isTermsAgreed: false,
    rules: {
      required: value => !!value || '必填',
    },
    login_logo: '',
    sms_code: '',
    invite_code: '',
    count_down: 0
  }),

  created() {
      this.loadLl()
      this.invite_code = '';
      if(this.$route.query.code){
          this.invite_code = this.$route.query.code
      }
      if(localStorage.getItem('inviteCode')){
          this.invite_code = localStorage.getItem('inviteCode')
      }
  },

  beforeRouteUpdate(to, from, next) {
      this.invite_code = to.query.code ? to.query.code : '';
      next();
  },

  methods: {
      goToTermsPage() {
          this.$router.push('/user/about');
      },
      loadLl() {
          axios.get(`/v1/home`).then((response) => {
              this.login_logo = response.data.data.login_logo;
          })
              .catch(function () {})
              .then(function () {});
      },
    sendSms() {
        if (!(/^1\d{10}$/.test(this.mobile))) {
            this.$toasted.show("手机号码不正确", {type: "error"});
            return;
        }

        const that = this;
        that.count_down = 60;
        axios.post("/v1/login/send-sms", {
            mobile: this.mobile,
        }).then((response) => {
            if (response.data.code == 0) {
                that.countDown();
            } else {
                that.$toasted.show(response.data.msg, {type: "error"});
            }
        }).catch(function () {})
        .then(function () {
        });
    },

    countDown() {
        const that = this;
        setTimeout(function(){
            that.count_down--;
            if(that.count_down>0) {
                that.countDown();
            }
        }, 1000)
    },

    doRegister() {
      if (!this.$refs.form.validate()) {
        return;
      }
        if(!this.isTermsAgreed){
            this.$toasted.show('用户注意条款未同意', {type: "error"});
            return;
        }
      const that = this;
      that.loading = true;
      axios.post("/v1/register", {
          mobile: this.mobile,
          password: this.password,
          sms_code: this.sms_code,
          name: this.name,
          invite_code: this.invite_code,
      }).then((response) => {
        if (response.data.code == 0) {
          that.$store.dispatch("user", response.data.data);
          that.$store.dispatch("token", response.data.data.token);
          that.$router.replace({ path: `/` });
          that.$toasted.show('注册成功');
        } else {
          that.$toasted.show(response.data.msg, {type: "error"});
        }
      }).catch(function () {})
      .then(function () {
          that.loading = false;
      });
    },
  },
};
</script>
